<template>
  <div >
    <el-card style="box-shadow: 0 0 0 0;">
      <template v-if="tagName!=''" #header>
        <div class="card-header">
          标签名称：{{ tagName }}  总条数：{{ all }}
          <i  v-if="loading" class="el-icon-loading"/>
        </div>
      </template>
      <template v-else-if="isHome" #header>
        <div class="card-header">
          <el-input v-model="input" placeholder="请输入文章标题" style="width:200px" />
          <i  v-if="loading" class="el-icon-loading"/>
          <i v-if="!loading" @click="refreshArticle" class="el-icon-refresh refresh" />
        </div>
      </template>
      <el-row>
        <el-col class="infinite-list-wrapper"  >
          <el-row
            v-infinite-scroll="load"
            class="list"
            :infinite-scroll-distance="0"
            :infinite-scroll-delay="100"
            :infinite-scroll-disabled="disabled"
            :infinite-scroll-immediate="true"
            style="height:500px;overflow-y:scroll;"
          >
            <li v-for="article in articles " class="list-item">
              <div style=" padding-top: 5px;">
              <router-link :to="'/operation/look/'+article.articleId" class="link">
                <span style="padding-left: 5px">{{ id==='' ? article.title : article.title.substring(0,6)+'...' }}</span>
              </router-link>
              </div>
              <div style="margin-top: 10px;padding-left: 5px;padding-bottom: 5px">
                <router-link :to="'/user/info/'+article.id"><span class="item author"> {{ article.author }} </span></router-link>
                <span class="item">{{ article.blogTime.substring(0,11) }} </span>
                <span class="item"> <svg-icon icon-class="eye-open" /> {{ article.view }}</span>
                <span v-if="isHome" class="item"> <svg-icon icon-class="star" /> {{ article.collectionCount }}</span>
              </div>
            </li>
            <p v-if="noMore" style="text-align: center;">没有更多了</p>
          </el-row>

        </el-col>

<!--        <el-col :offset="7" :span="5">

        </el-col>-->
      </el-row>
    </el-card>
  </div>
</template>
<!--blogs: [,…]
0: {title: "Vue实现图片懒加载vue-lazyload", id: "1469202285186813954", author: "李四", view: 0, commentCount: 0,…}
articleId: 28
author: "李四"
blogTime: "2021-12-16 20:38:51"
commentCount: 0
id: "1469202285186813954"
lastTime: "2021-12-16 20:38:51"
title: "Vue实现图片懒加载vue-lazyload"
view: 0
-->
<script>
import { fetchAllArticle, fetchAllArticleById, fetchArticleByTag, searchArticle } from '@/api/article'
import Sticky from "@/components/Sticky";
export default {
  name: 'AllArticle',
  components: {Sticky},
  props: {
    isHome: {
      type: Boolean,
      default: false
    },
    isLook: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      all: 0,
      count: 0,
      loading: false,
      articles: [],
      immediate: true,
      tagName: '',
      input: ''
    }
  },
  computed: {
    noMore() {
      return this.count > this.all
    },
    disabled() {
      return this.loading || this.noMore
    }
  },
  watch: {
    input() {
      this.handleInput(this.input)
    }
  },
  created() {
  },
  methods: {
    refreshArticle(){
      this.articles=[]
      this.count=0
      this.load()
    },
    load() {
      if (this.noMore)
        return
      this.loading = true
      // 如果是首页传来的
      if (this.isHome) {
        this.fetchAticles()
      } else if (this.isLook) {
        this.fetchArticlesById()
      } else {
        const id = this.$route.params && this.$route.params.id
        this.tagName = this.$route.params && this.$route.params.name
        this.fetchAllArticleByTag(id)
      }
    },
    // 获取所有公开文章
    fetchAticles() {
      setTimeout(() =>{
        fetchAllArticle(this.count)
          .then(response => {
            const {allCount, blogs} = response.data
            this.all = allCount
            this.articles = [...this.articles, ...blogs]
            this.count += 10
            this.loading = false
          })
          .catch(error => {
            console.log(error)
          })
      },200)
    },
    // 根据用户id获取所有公开文章
    fetchArticlesById() {
      setTimeout(() =>{
        fetchAllArticleById(this.id, this.count)
          .then(response => {
            const {allCount, blogs} = response.data
            this.all = allCount
            this.articles = [...this.articles, ...blogs]
            this.count += 10
            this.loading = false
          })
          .catch(error => {
            console.log(error)
          })
      },200)
    },
    // 根据标签获取文章
    fetchAllArticleByTag(id) {
      setTimeout(() =>{
        fetchArticleByTag(id, this.count)
          .then(response => {
            const {allCount, blogs} = response.data
            this.all = allCount
            this.articles = [...this.articles, ...blogs]
            this.count += 10
            this.loading = false
          })
          .catch(error => {
            console.log(error)
          })
      },200)
    },
    // 根据标题获取文章
    handleInput() {
      this.articles = []
      setTimeout(() => {
        searchArticle({title: this.input})
          .then(response => {
            const {allCount, blogs} = response.data
            this.all = allCount
            this.articles = [...this.articles, ...blogs]
            this.count += 10
            this.loading = false
          })
          .catch(error => {
            console.log(error)
          })
      }, 200)
    }
  },

}
</script>

<style lang="scss" scoped>
.refresh{
  color: #e799b0;
  &:hover{
    cursor:pointer;
    color: #9ac8e2;
  }
}
::-webkit-scrollbar{
  width: 7px;
  height: 12px;
}
::-webkit-scrollbar-thumb{
  border-radius: 5px;
  background-color: #dbd9d9;
}
.list{
  font-family: '微软雅黑',serif;
 list-style: none;
}
.link:hover{
  color: red;
}
.list-item{

  box-shadow: 0px 0px 1px 0px #cccaca;
  margin-bottom: 2px;
}
.list-item:hover{
  background-color: rgba(250, 247, 247, 0.5);
}
.item{
  color: #a29a9a
}
.author:hover{
  color: tomato;
}
</style>
